<template>
  <div class="mui-pages" style="background-color: #fff;">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <div @click="fn.back()" class="mui-action-back"><img class="back-btn" src="../../../../static/images/back.png"></div>
        <div class="header-search flex-center">周度学习详情</div>
      </div>
    </header>
    <div id="slider" class="mui-slider mui-fullscreen">
      <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="meeting-tab flex-justify-start">
          <a @click="tabIndex=0" :class="{'mui-active':tabIndex==0}" class="mui-control-item"
             href="javascript:void(0)">学习计划信息</a>
          <a @click="tabIndex=1" :class="{'mui-active':tabIndex==1}" class="mui-control-item"
             href="javascript:void(0)">集体学习信息</a>
          <a @click="tabIndex=2" :class="{'mui-active':tabIndex==2}" class="mui-control-item"
             href="javascript:void(0)">学习答题信息</a>
        </div>
      </div>
      <div class="mui-slider-group">
        <!-- ---------学习计划信息---------start -->
        <div v-if="tabIndex==0" id="planInfo" class="mui-slider-item mui-control-content mui-active">
          <div id="scroll1" class="mui-scroll-wrapper">
            <div class="mui-scroll record-member-lists">
              <ul class="mui-table-view">
                <li class="mui-table-view-cell list-item">
                  <b>周度学习主题：</b><span class="mui-pull-right">{{data.subject}}</span>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>周度学习内容：</b>
                  <div class="news-world-details">
                    {{data.content}}
                  </div>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>学习时间：</b><span class="mui-pull-right">{{formateTime(data.studyBeginTime)}}-{{formateTime(data.studyEndTime)}}</span>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>学习附件：</b>
                  <div class="text-center no-data" v-if="!attachmentList || attachmentList.length===0">
                    <img src="../../../../static/images/no_data.png" alt="">
                    <p>暂无数据</p>
                  </div>
                  <ul class="list-item mui-content-padded flex-justify-start" v-if="attachmentList">
                    <li class="enclosure-upload" v-for="(data,index) in getFilePath(attachmentList)" :key="data.fileId">
                      <img v-if="isImage(data.fileName)" class="enclosure-upload-file" :src="data.url" @click="showImagePreview(data.url)" />
                      <img v-if="!isImage(data.fileName)" class="enclosure-upload-file" src="../../../../static/images/up_document.png"  @click="downLoadFile(data)" />
                      <p class="mui-ellipsis">{{data.fileName}}</p>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- ---------学习计划信息---------end -->
        <!-- ---------集体学习信息-----------start -->
        <study-info-component v-if="tabIndex==1" :initData="data"></study-info-component>
        <!-- ---------集体学习信息---------end -->
        <!-- ---------学习答题信息-----------start -->
        <div v-if="tabIndex==2 && data.status !== '1'" id="answerInfo" class="mui-slider-item mui-control-content">
          <div class="mui-scroll-wrapper">
            <div class="mui-scroll work-message-lists">
              <div class="list-textarea work-message-lists group-study">
                <h4>答题须知</h4>
                <p class="answer-notice">1、在规定的1小时内完成作答<br/>
                  2、满足上述条件一次通过，相应的积分增加1分；两次通过，相应积分增加0.9分；三次通过，相应积分增加0.8分；三次未通过，相应积分增加0.5分。<br/>
                  3、答题时间为学习完7日内，超过答题时间，积分为0分。<br/>
                  4、针对未参与答题的人员经支部提交了情况说明，并经党务办确认通过后，该人员的分数由原来的0分变更标记为0.5分。</p>
              </div>
              <b v-if="data.status === '-1'" class="schedule-item-world flex-center work-message-lists">本次集体学习暂未开展，答题未开放！</b>
              <b v-if="data.status === '1'" class="schedule-item-world flex-center work-message-lists">本次集体学习已答题！</b>
              <b v-if="data.status === '3'" class="schedule-item-world flex-center work-message-lists">本次集体学习已超期！</b>
              <b v-if="data.status === '4'" class="schedule-item-world flex-center work-message-lists">本次集体学习免答题！</b>
              <div class="statistics-lists group-study">
                <div v-if="data.status === '0'" @click="goAnswer(data)" class="sign-end-btn">立即答题</div>           <!--//开放时按钮的状态 -->
                <div v-if="data.status !== '0'" class="sign-start-btn">立即答题</div>  <!-- 未开放时按钮的状态 -->
              </div>
            </div>
          </div>
        </div>

        <div v-if="tabIndex==2 && data.status === '1'" id="answerInfo2" class="mui-slider-item mui-control-content mui-active">
          <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
              <ul class="mui-table-view">
                <li class="mui-table-view-cell list-item">
                  <b>答题积分：</b><span class="mui-pull-right">+{{memberAnswerInfo.score}}分</span>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>通过次数：</b><span class="mui-pull-right">{{memberAnswerInfo.passTimes}}次未通过</span>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>总题数：</b><span class="mui-pull-right">{{memberAnswerInfo.totalQuestionCount}}题</span>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>答对题数：</b><span class="mui-pull-right">{{memberAnswerInfo.rightQuestionCount}}题</span>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>是否参与答题：</b><span v-if="memberAnswerInfo.isAnswer === 'Y'" class="mui-pull-right">是</span><span v-if="memberAnswerInfo.isAnswer === 'N'" class="mui-pull-right">否</span>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>是否特殊情况：</b><span v-if="memberAnswerInfo.isRequestNoAnswer === 'Y'" class="mui-pull-right">是</span><span v-if="memberAnswerInfo.isRequestNoAnswer === 'N'" class="mui-pull-right">否</span>
                </li>
                <li class="mui-table-view-cell list-item">
                  <b>答题时间：</b><span class="mui-pull-right">{{memberAnswerInfo.answerTime}}</span>
                </li>
              </ul>
              <p class="study-develop message-details">想了解本次学习答题更多信息？ <span @click="detail(data,memberAnswerInfo)">点击查看试题详情</span></p>
            </div>
          </div>
        </div>
        <!-- ---------学习答题信息---------end -->
      </div>
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import api from '@/common/config/api'
  import moment from 'moment'
  import studyInfoComponent from './studyInfoComponent'
  export default {
    name: 'studyDetails',
    components: {studyInfoComponent},
    data () {
      return {
        fn: tools,
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        objectsName: '',
        data: {},
        infinite: true,
        pageIndex: 0,
        year: new Date().getFullYear(),
        attachmentList: [],
        tabIndex: 0,
        weekId: '',
        memberAnswerInfo: {}
      }
    },
    created () {
      this.loadData()
    },
    methods: {
      detail (data, memberAnswerInfo) {
        if (memberAnswerInfo.passTimes<1 && memberAnswerInfo.score === 1) {
          memberAnswerInfo.status = '4';
        } else {
          memberAnswerInfo.status = '1';
        }
        this.$store.state.answerRecord = memberAnswerInfo
        this.$router.push({path: `/answerDetails/${data.id}/2`})
      },
      onPullingUp () {
        console.log('onPullingUp')
        this.loadData()
      },
      reloadData () {
        this.pageIndex = 0
        this.swipeData = []
        this.loadData()
      },
      loadData () {
        this.weekId = this.$route.params.weekId
        let userInfo = this.$store.state.userInfo
        this.partyGroupId = userInfo.partyMemberModel.partyGroupId
        let data = {
          partyGroupId: this.partyGroupId,
          weekId: this.weekId
        }
        loginService.getStudyPlanWeekByWeekId(data).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          this.data = res.data
          if (this.data) {
            if (this.data.files && this.data.files !== '') {
              this.attachmentList = JSON.parse(this.data.files)
            }
            if (this.data.status === '1') {
              this.getPartyMemberAnswerInfo()
            }
          }
        })
      },
      formateTime (str) {
        moment.lang('zh-cn')
        return moment(str).format('MM月DD日')
      },
      meetingStatus (str) {
        return str === "未开展"
      },
      getFilePath (arr) {
        arr.map((v) => {
          v.url = api.downLoadFile + v.fileId
          return v
        })
        return arr
      },
      isImage (fileName) {
        let arrExt = fileName.split('.')
        return 'PNG,JPG,JPEG,BMP,GIF'.split(',').indexOf(arrExt[arrExt.length - 1].toUpperCase()) > -1
      },
      goAnswer (data) {
        this.$router.push({path: `/answerBegin/${data.id}`})
      },
      showImagePreview (url) {
        if (url.length < 1) {
          return false
        }
        let imgs = [url]
        this.$createImagePreview({
          initialIndex: 0,
          imgs: imgs
        }, (h) => {
          return h('div', {
            class: {
              'image-preview-custom-header': false
            },
            slot: 'header'
          }, '')
        }).show()
      },
      downLoadFile (item) {
        console.log("item={}", item)
        if (window.android && window.android.downloadFile) {
          window.android.downloadFile(item.url, item.fileName)
        }
      },
      getPartyMemberAnswerInfo () {
        let userInfo = this.$store.state.userInfo
        let data = {
          partyMemberId: userInfo.partyMemberModel.id,
          weekPlanId: this.weekId
        }
        loginService.getPartyMemberAnswerInfo(data).then((res) => {
          if (res.code !== 200) {
            return tools.tip(res.message)
          }
          this.memberAnswerInfo = res.data
        })
      }
    }
  }
</script>

<style scoped>

</style>
